<template>
    <view class="gjl-view">
        <view class="bg-box">
            <view class="img-box">
                <image src="https://img.thumbrary.com/bookStoreBaogao.png" mode=""></image>
            </view>
        </view>
        <view class="main">
            <view class="card-box">
                <view class="card-inner">
                    <view class="user-box">
                        <view class="user-img">
                            <image :src="baogaoInfo.member.avatarUrl" mode=""></image>
                        </view>
                        <view class="user-name">
                            {{baogaoInfo.member.nickName}}
                        </view>
                    </view>
                    <view class="tip-tag">
                        <view class="dot"></view>
                        <view class="text">{{time | format('yy年m月')}}份阅读报告</view>
                        <view class="dot"></view>
                    </view>
                    <view class="tip">
                        拇指宫殿制作
                    </view>
                </view>
            </view>
            <view class="img-text">本月概述</view>
            <view class="card-box2">
                <view class="text-box">
                    本月，{{baogaoInfo.member.nickName}}阅读了<text class="red">{{baogaoInfo.BBooksNum || 0}}</text>本书超越平台的<text class="red">{{baogaoInfo.BBooksNumCY || 0}}%</text>的人，亲子阅读打卡<text class="green">{{baogaoInfo.dayNum || 0}}</text>天超越平台的<text class="red">{{baogaoInfo.dayNumCY || 0}}%</text>的人，继续加油哦~
                </view>
                <view class="yuan-box">
                    <view class="yuan yuan1">
                        <view class="inner">
                            {{baogaoInfo.BBooksNum || 0}}本
                        </view>
                    </view>
                    <view class="yuan yuan2">
                        <view class="inner">
                            {{baogaoInfo.dayNum || 0}}天
                        </view>
                    </view>
                </view>
                <view class="darkCalendar-box">
                    <darkCalendar :signeddates="dakaArr" @changeMouth="changeMouth"></darkCalendar>
                </view>
            </view>
            <view class="card-box card-box-margin">
                <view class="card-inner">
                    <view class="tip-tag">
                        <view class="dot"></view>
                        <view class="text">我的阅读量</view>
                        <view class="dot"></view>
                    </view>
                    <view class="uCharts-box">
                        <uCharts canvasId="canvas1" ref="canvas1" :opts="dataJson" :cWidth="cWidth" :cHeight="cHeight"></uCharts>
                    </view>
                    <view class="text-box">
                        本月已读绘本<text class="red">{{baogaoInfo.BBooksNum || 0}}</text>本，同上月增加<text class="red">{{baogaoInfo.YOYBooksNum || 0}}</text>本，{{baogaoInfo.BBooksNum < baogaoInfo.averageBooksNum?'低于':'高于'}}上月平均阅读量<text class="green">{{baogaoInfo.averageDayNum}}</text>本，{{baogaoInfo.BBooksNum < baogaoInfo.averageBooksNum?'革命尚未成功，同志仍需努力':'再接再厉'}}~
                    </view>
                    <view class="tip-tag">
                        <view class="dot"></view>
                        <view class="text">我的阅读天数</view>
                        <view class="dot"></view>
                    </view>
                    <view class="uCharts-box2">
                        <uCharts canvasId="canvas2" ref="canvas2" :opts="dataJson2" :cWidth="cWidth" :cHeight="cHeight"></uCharts>
                    </view>
                    <view class="text-box">
                        本月共计阅读绘本<text class="red">{{baogaoInfo.dayNum || 0}}</text>天，本月平均阅读<text class="red">{{baogaoInfo.averageDayNum || 0}}</text>天~
                    </view>
                </view>
            </view>
            <view class="card-box card-box-margin">
                <view class="card-inner">
                    <view class="tip-tag">
                        <view class="dot"></view>
                        <view class="text">我最喜欢的书籍</view>
                        <view class="dot"></view>
                    </view>
                    <view class="blue-title6">我的TOP5</view>
                    <view class="scroll-box" v-if="baogaoInfo.top5 && baogaoInfo.top5.length">
                        <scroll-view class="scroll-X" scroll-x="true" scroll-left="0">
                            <view class="book-ul">
                                <view class="book-li" v-for="(item2,index2) in baogaoInfo.top5" :key="index2">
                                    <view class="img-box">
                                        <image :src="item2.bookstoreImg" mode="aspectFit"></image>
                                    </view>
                                </view>
                            </view>
                        </scroll-view>
                    </view>
                    <view class="noData" v-else>
                        暂无阅读信息哦~
                    </view>
                    <view class="blue-title6">平台TOP10</view>
                    <view class="scroll-box" v-if="baogaoInfo.top10 && baogaoInfo.top10.length">
                        <scroll-view class="scroll-X" scroll-x="true" scroll-left="0">
                            <view class="book-ul">
                                <view class="book-li" v-for="(item2,index2) in baogaoInfo.top10" :key="index2">
                                    <view class="img-box">
                                        <image :src="item2.bookstoreImg" mode="aspectFit"></image>
                                    </view>
                                </view>
                            </view>
                        </scroll-view>
                    </view>
                    <view class="noData" v-else>
                        暂无阅读信息哦~
                    </view>
                    <view class="tip-tag">
                        <view class="dot"></view>
                        <view class="text">阅读足迹</view>
                        <view class="dot"></view>
                    </view>
                    <view class="footer-bar" v-if="haveData">
                        <view class="line-blue"></view>
                        <scroll-view class="scroll-X" scroll-x="true" scroll-left="0">
                            <view class="book-ul">
                                <view class="book-li" v-if="item.list && item.list.length" v-for="(item,index) in list" :key="index">
                                    <view class="li-inner">
                                        <view class="time">
                                            {{item.date}}
                                        </view>
                                        <view class="yuan-box">
                                            <view class="yuan">
                                                <view class="yuan2"></view>
                                            </view>
                                        </view>
                                        <view class="book-list" v-for="(item2,index2) in item.list" :key="index2">
                                            <view class="img-box" v-if="index2 < 3">
                                                <image :src="item2.bookstoreImg" mode="aspectFit"></image>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </scroll-view>
                    </view>
                    <view class="noData" v-else>`
                        暂无阅读信息哦~
                    </view>
                </view>
            </view>
            <view class="card-box card-box-margin">
                <view class="card-inner">
                    <view class="share-box">
                        <view class="left">
                            <view class="rang">
                                0~14岁
                            </view>
                            <view class="text">
                                海量中英图书，玩具共享平台
                                寄书到家，往返包邮
                            </view>
                        </view>
                        <view class="right">
                            <view class="img-box">
                                <image :src="`https://xcxapi.thumbrary.com/xcxapi/share?token=${token}`" mode=""></image>
                            </view>
                        </view>
                    </view>
                    <view class="share-btn">
                        <button open-type="share" class="btn" >分享</button>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import utils from '@/util/index.js'
    import darkCalendar from '@/components/dark-calendar/dark-calendar3.vue'
    import uCharts from '@/components/u-charts/component.vue'
    import dataJson from '@/components/u-charts/data.json'
    import service from "@/service";
    import {
        mapGetters
    } from 'vuex'
    export default {
        filters: {
            format(val, format) {
                return utils.format(val, format)
            }
        },
        components: {
            darkCalendar,
            uCharts
        },
        data() {
            return {
                dataJson: {
                    categories: ["上月", "本月"],
                    series: [{
                        name: "阅读数量",
                        data: [{
                            value: 1,
                            color: "blue"
                        }, {
                            value: 1,
                            color: "blue"
                        }],
                        textColor: 'blue',
                        type: 'column',
                        disableLegend: true,
                        format: function(item, category) {
                            return item + '本'
                        }
                    }]
                },
                dataJson2: {
                    categories: ["上月", "本月"],
                    series: [{
                        name: "阅读天数",
                        data: [{
                            value: 1,
                            color: "blue"
                        }, {
                            value: 1,
                            color: "blue"
                        }],
                        textColor: 'blue',
                        type: 'column',
                        disableLegend: true,
                        format: function(item, category) {
                            return item + '天'
                        }
                    }]
                },
                pos: {},
                baogaoInfo: {},
                time: '',
                imgsrc: '',
                dakaArr: [],
                list: [],
                token:''
            }
        },
        computed: {
            // 是否有阅读足迹
            haveData(){
                let n = 0;
                for(let i = 0; i < this.list.length; i ++){
                    if(this.list[i] && this.list[i].list && this.list[i].list.length){
                        n ++
                    }
                }
                return n
            },
            ...mapGetters(['userInfo']),
            cWidth() {
                return uni.upx2px(606)
            },
            cHeight() {
                return uni.upx2px(382)
            }
        },
        // computed: mapGetters({}){
        //     cWidth() {
        //         return uni.upx2px(606)
        //     },
        //     cHeight() {
        //         return uni.upx2px(382)
        //     }
        // },
        onLoad(res) {
            this.pos = res
            this.getDate()
            this.getData()
            uni.getStorage({
                key: 'token',
                success: (res)=> {
                    this.token = res.data
                }
            });
        },
        methods: {
            // 切换月份
            changeMouth(dates){
                var y , m, d ,l;
                l = 0
                for (let i = 0; i < dates.length; i++) {
                    if (dates[i].lm) {
                        l ++;
                        y = dates[i].year
                        m = dates[i].month + 1
                        d = dates[i].date
                        this.selectOne(`${y}/${m}/${d}`,d,m,y)
                        if(l == 1){
                            var firstDay = new Date(y, m - 1, 1).getTime()/1000;
                            var lastDay = new Date(y, m, 1).getTime()/1000;
                            this.getDaka(firstDay)
                        }
                    }
                }
            },
            // 获取打卡数据
            getDaka(temp){
                let obj = {Timestamp: temp}
                if(this.pos.memberId){
                    obj.memberId = this.pos.memberId
                }
                service.mineService.BookstorePunchCalendar({
                    data: {
                        Timestamp: temp
                    },
                    success: res => {
                        if(res.result){
                            this.dakaArr = res.result
                        }
                    },
                    fail: () => {
                
                    },
                    complete: () => {
                        uni.hideLoading();
                    },
                });
            },
            selectOne(date,d,m,y){
                d = d*1
                var temp = new Date(date).getTime()/1000;
                let obj = {Timestamp: temp}
                if(this.pos.memberId){
                    obj.memberId = this.pos.memberId
                }
                service.mineService.BookstorePunchGet({
                    data: {
                        ...obj
                    },
                    success: res => {
                        let obj = {
                            list: res.result,
                            date: `${m}-${d}`,
                            num: res.result.length
                        }
                        this.$set(this.list,`${d - 1}`,obj)
                    },
                    fail: () => {
                
                    },
                    complete: () => {
                        uni.hideLoading();
                    },
                });
            },
            onShareAppMessage(res) {
            	if (res.from === 'button') {
            		// 来自页面内分享按钮
            		console.log(res.target);
            	}
            	return {
            		title: `${this.baogaoInfo.member.nickName}的阅读报告（${utils.format(this.time,'yy年m月')}）`,
                    desc: '拇指宫殿，海量图书等你来',
            		path: `/pagesMine/bookstore/baogaoOpen`
            	};
            },
            // 获取当前时间
            getDate() {
                this.time = parseInt(new Date().getTime() / 1000)
            },
            // 获取阅读报告数据
            getData() {
                let obj = {Timestamp: this.time}
                if(this.pos.memberId){
                    obj.memberId = this.pos.memberId
                }
                service.mineService.BookstorePlanReport({
                    data: {
                        ...obj
                    },
                    success: res => {
                        this.baogaoInfo = res.result
                        this.dataJson.series[0].data[1].value = res.result.BBooksNum || 0;
                        this.dataJson.series[0].data[0].value = res.result.lastNumBooks || 0;
                        this.dataJson2.series[0].data[1].value = res.result.dayNum || 0;
                        this.dataJson2.series[0].data[0].value = res.result.lastDayNum || 0;
                        this.$refs.canvas1.changeData('canvas1',this.dataJson)
                        this.$refs.canvas2.changeData('canvas2',this.dataJson2)
                    },
                    fail: () => {

                    },
                    complete: () => {
                        uni.hideLoading();
                    },
                });
            }
        }
    }
</script>

<style scoped lang="scss">
    .gjl-view {
        min-height: 100%;
        background: rgba(69, 91, 245, 1);
        overflow: hidden;
        padding-bottom: 75rpx;
        .main {
            position: relative;
            z-index: 2;
            margin: 0 30rpx;
            .noData{
                text-align: center;
                font-size: 24rpx;
                color: #999999;
                margin: 20rpx 0;
            }
            .img-text {
                text-align: center;
                margin-top: 453rpx;
                font-size: 32rpx;
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
            }

            .card-box-margin {
                margin-top: 65rpx;
            }

            .card-box2 {
                padding: 24rpx 0rpx 0rpx;
                margin-top: 49rpx;
                background: rgba(255, 255, 255, 1);
                border-radius: 20rpx;

                .darkCalendar-box {
                    margin-top: 68rpx;
                }

                .yuan-box {
                    margin-top: 41rpx;
                    display: flex;
                    align-items: center;
                    justify-content: space-around;

                    .yuan {
                        width: 180rpx;
                        height: 180rpx;
                        background: rgba(255, 180, 68, 0.2);
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        .inner {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: 156rpx;
                            height: 156rpx;
                            background: rgba(255, 180, 68, 1);
                            border-radius: 50%;
                            font-size: 28rpx;
                            font-weight: 400;
                            color: rgba(255, 255, 255, 1);
                        }
                    }

                    .yuan2 {
                        background: rgba(25, 200, 139, 0.2);

                        .inner {
                            background: rgba(25, 200, 139, 1);
                        }
                    }
                }

                .text-box {
                    padding: 0 29rpx;
                    font-size: 28rpx;
                    font-weight: 400;
                    color: rgba(51, 51, 51, 1);

                    .red {
                        font-size: 48rpx;
                        font-weight: 400;
                        color: #FF5135;
                    }

                    .green {
                        font-size: 48rpx;
                        font-weight: 400;
                        color: #19C88B;
                    }
                }
            }

            .card-box {
                position: relative;
                padding: 37rpx 40rpx 49rpx;
                margin-top: 100rpx;
                background: rgba(255, 255, 255, 1);
                border-radius: 20rpx;
                .share-btn{
                    margin-top: 27rpx;
                    .btn{
                        height:92rpx;
                        background:rgba(43,168,252,1);
                        line-height: 92rpx;
                        font-size:32rpx;
                        font-weight:bold;
                        color:rgba(255,255,255,1);
                    }
                }
                .share-box{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .left{
                        font-size:32rpx;
                        font-weight:bold;
                        color:rgba(51,51,51,1);
                        .rang{
                            
                        }
                        .text{
                            margin-top: 5rpx;
                        }
                    }
                    .right{
                        margin-left: 20rpx;
                        .img-box{
                            display: flex;
                            image{
                                width:180rpx;
                                height:180rpx;
                                background:rgba(217,217,217,1);
                            }
                        }
                    }
                }
                .footer-bar {
                    margin-top: 127rpx;
                    position: relative;
                    height: 500rpx;
                    .line-blue {
                        position: absolute;
                        left: 50%;
                        width: 690rpx;
                        transform: translateX(-50%);
                        height:18rpx;
                        background:rgba(43,168,252,1);
                    }
                    .scroll-X {
                        top: -58rpx;
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                        width: 690rpx;
                        height: 600rpx;
                        .book-ul {
                            height: 100%;
                            display: flex;
                            .book-li+.book-li {
                                margin-left: 78rpx;
                            }
                            .book-li {
                                .li-inner {
                                    .time{
                                        margin-bottom: 11rpx;
                                        text-align: center;
                                        font-size:28rpx;
                                        font-weight:bold;
                                        color:rgba(51,51,51,1);
                                    }
                                    .yuan-box{
                                        margin-bottom: 15rpx;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        .yuan{
                                            display: flex;
                                            align-items: center;
                                            justify-content: center;
                                            width:40rpx;
                                            height:40rpx;
                                            background:rgba(43,168,252,1);
                                            border-radius:50%;
                                            .yuan2{
                                                width:28rpx;
                                                height:28rpx;
                                                background:rgba(255,255,255,1);
                                                border-radius:50%;
                                            }
                                        }
                                    }
                                    .book-list + .book-list{
                                        margin-top: 10rpx;
                                    }
                                    .book-list {
                                        .img-box {
                                            display: flex;
                                            image {
                                                background-color: #999;
                                                height: 135rpx;
                                                width: 180rpx;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }

                }

                .blue-title6 {
                    margin-top: 41rpx;
                    padding-left: 26rpx;
                    font-size: 32rpx;
                    font-weight: 400;
                    color: rgba(51, 51, 51, 1);
                }

                .scroll-box {
                    margin-top: 24rpx;
                    height: 165rpx;

                    .scroll-X {
                        height: 100%;

                        .book-ul {
                            height: 100%;
                            display: flex;

                            .book-li+.book-li {
                                margin-left: 20rpx;
                            }

                            .book-li {
                                height: 100%;

                                .img-box {
                                    height: 100%;
                                    display: flex;

                                    image {
                                        height: 100%;
                                        width: 220rpx;
                                    }
                                }
                            }
                        }
                    }
                }

                .uCharts-box2 {}

                .text-box {
                    padding: 0 29rpx;
                    font-size: 28rpx;
                    font-weight: 400;
                    color: rgba(51, 51, 51, 1);

                    .red {
                        font-size: 48rpx;
                        font-weight: 400;
                        color: #FF5135;
                    }

                    .green {
                        font-size: 48rpx;
                        font-weight: 400;
                        color: #19C88B;
                    }
                }

                .uCharts-box {
                    margin-top: 40rpx;
                }

                .tip {
                    position: absolute;
                    top: 42rpx;
                    right: 0;
                    display: flex;
                    align-items: center;
                    background: linear-gradient(122deg, rgba(255, 180, 68, 1) 0%, rgba(252, 87, 98, 1) 100%);
                    border-radius: 40rpx 0px 0px 40rpx;
                    padding: 9rpx 32rpx;
                    font-size: 28rpx;
                    font-weight: 400;
                    color: rgba(255, 255, 255, 1);
                }

                .tip-tag {
                    height: 87rpx;
                    background: rgba(43, 168, 252, 1);
                    border-radius: 20rpx;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin: 29rpx auto 0;
                    padding: 0 40rpx;

                    .dot {
                        width: 12rpx;
                        height: 12rpx;
                        background: rgba(255, 255, 255, 1);
                        border-radius: 50%;
                    }

                    .text {
                        font-size: 32rpx;
                        font-weight: 400;
                        color: rgba(255, 255, 255, 1);
                    }
                }

                .user-box {
                    display: flex;
                    align-items: center;

                    .user-name {
                        margin-left: 29rpx;
                        font-size: 32rpx;
                        font-weight: 400;
                        color: rgba(51, 51, 51, 1);
                    }

                    .user-img {
                        display: flex;

                        image {
                            width: 104rpx;
                            height: 104rpx;
                            background: rgba(199, 199, 199, 1);
                            border-radius: 50%;
                        }
                    }
                }
            }
        }

        .bg-box {
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;

            .img-box {
                display: flex;

                image {
                    width: 750rpx;
                    height: 942rpx;
                }
            }
        }
    }
</style>
